<template>
    <div v-loading="type === enum1.LOADING" :style="emptyStyle" style="position: relative; z-index: 0">
        <div class="wh-100 d-flex-center flex-column" style="position: absolute">
            <!--<el-empty class="wh-100"   v-if="type!==enum1.SUCCESS & type!==enum1.LOADING " :image="img1" :image-size="imageSize"-->
            <!--          :description="descriptionWord">-->
            <!--</el-empty>-->
            <img v-if="(type !== enum1.SUCCESS) & (type !== enum1.LOADING)" :src="img1" :width="imageSize" />
            <div v-if="(type !== enum1.SUCCESS) & (type !== enum1.LOADING)" class="fs-14">{{ descriptionWord }}</div>
        </div>
        <div class="empty-box_content" :class="{ 'is-hide': type !== enum1.SUCCESS }">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'EmptyStatus',
    props: {
        emptyStyle: { type: String },
        type: { type: String },
        imageSize: { type: Number, default: 180 },
        descriptionWord: { type: String, default: '暂无数据' }
    },
    data() {
        return {
            img1: '',
            enum1: {
                SUCCESS: 'SUCCESS',
                EMPTY: 'Empty',
                EMPTY_VAR: 'EmptyVar',
                LOADING: 'Loading'
            }
        };
    },
    // mounted() {
    //     if (this.type === 'Empty'){
    //         this.img1 = require('./images/empty.png')
    //     }else if (this.type === 'EmptyVar'){
    //         this.img1 = require('./images/empty-var.png')
    //     }
    // },
    // watch: {
    //  type: function (nv, ov){
    //         if (nv === 'Empty'){
    //             this.img1 = require('./images/empty.png')
    //         }else if (nv === 'EmptyVar'){
    //             this.img1 = require('./images/empty-var.png')
    //         }
    //     }
    // },
    methods: {}
};
</script>
<style lang="less">
.empty-box_content {
    &.is-hide {
        opacity: 0;
    }
    height: inherit;
}
</style>
